/* eslint react/no-string-refs:0 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { findDOMNode } from 'react-dom';
import { Link, withRouter } from 'react-router-dom';
import IceContainer from '@icedesign/container';
import {
  Input,
  Button,
  Select,
  DatePicker,
  TimePicker,
  Radio,
  Message,
  Upload,
  Checkbox,
  Grid,
  Icon,
  Timeline,
  Dialog,
} from '@alifd/next';
// Affix // 如果被钉住的内容超过了页面的高度，那么用户就无法点击到应该点击的按钮了
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
const html2pdf = require('html2pdf.js');
const moment = require('moment');
import Cookies from 'universal-cookie';

const cookies = new Cookies();

import tableStyles  from '../../templates/table.scss';
import request from '../../../../instances/request';
import { minHeight } from "../../../../conf/config";
import ReasonDialog from './ReasonDialog';

const { Option } = Select;
const { Group: RadioGroup } = Radio;

const { Row, Col } = Grid;

@withRouter
export default class RequestNoteForm extends Component {
  static displayName = 'RequestNoteForm';

  static propTypes = {
    formConfig: PropTypes.array,
    formData: PropTypes.object,
    actions: PropTypes.object,
    title: PropTypes.string,
    approvers: PropTypes.array,
    step: PropTypes.number,
    reason: PropTypes.string,
    isRejected: PropTypes.bool,
    oid: PropTypes.string,
    exportTableConfig: PropTypes.array,
    type: PropTypes.string,
  };

  static defaultProps = {
    formConfig: [],
    title: '',
    formData: {},
    actions: {},
    approvers: [],
    step: 0,
    reason: '',
    isRejected: false,
    oid: '',
    type: '',
    exportTableConfig: [],
  };

  constructor(props) {
    super(props);
    this.state = {
      value: {},
      formItems: [],
      onSiteDescription: '',  // 实施情况描述
      onSiteTestDescription: '',  // 测试情况
      onSiteTestResult: '', // 测试结果
      onSiteSupervisor: '', // 监控情况
      verifyContent: '', // 变更核实者核实
      reviewCode: '',  // 变更回顾代码
      reviewExplain: '',  // 变更回顾说明
      reviewCloseCode: '', // 变更关闭代码
      realFileName: '',
      commitLoading: false, // 提交按钮loading状态控制
      saveLoading: false,  // 保存按钮loading状态控制
    };
  }

  formChange = (value) => {
    this.setState({
      value,
    });
  };

  renderForm(formData) {
    let { enableChange } = this.props.actions;
    return formData.map((ele, idx) => {
      switch( ele.type ) {
        case 'Input':
          return (
              <div key={idx} style={styles.formItem}>
                <div style={styles.formLabel}>{ele.label}</div>
                <IceFormBinder
                  required={ele.isRequired}
                  message={ele.message}
                  name={ele.name}
                >
                  <Input
                    pattern={ele.pattern}
                    size="medium"
                    style={{ width: '400px' }}
                    disabled={!enableChange || ele.enableChange}
                    placeholder={ele.placeholder}
                  />
                </IceFormBinder>
                <div style={styles.formError}>
                  <IceFormError name={ele.name} />
                </div>
            </div>
          );

        case 'TextArea':
          return (
            <div key={idx}  style={styles.formItem}>
              <div style={styles.formLabel}>{ele.label}</div>
              <IceFormBinder
                required={ele.isRequired}
                message={ele.message}
                name={ele.name}
              >
                <Input.TextArea
                  size="medium"
                  style={{ width: '400px' }}
                  disabled={!enableChange || ele.enableChange}
                  placeholder={ele.placeholder}
                />
              </IceFormBinder>
              <div style={styles.formError}>
                <IceFormError name={ele.name} />
              </div>
            </div>
          );

        case 'Radio' :
          return (
            <div key={idx} style={styles.formItem}>
              <div style={styles.formLabel}>{ele.label}</div>
              <IceFormBinder
                required={ele.isRequired}
                message={ele.message}
                name={ele.name}
              >
                <RadioGroup
                  dataSource={ele.dataSource}
                  disabled={!enableChange || ele.enableChange}
                />
              </IceFormBinder>
              <div style={styles.formError}>
                <IceFormError name={ele.name} />
              </div>
            </div>
          );

        case 'Checkbox' :
          return (
            <div key={idx} style={styles.formItem}>
              <div style={styles.formLabel}>{ele.label}</div>
              <IceFormBinder
                required={ele.isRequired}
                message={ele.message}
                name={ele.name}
              >
                <Checkbox.Group
                  dataSource={ele.dataSource}
                  disabled={!enableChange || ele.enableChange}
                />
              </IceFormBinder>
              <div style={styles.formError}>
                <IceFormError name={ele.name} />
              </div>
            </div>
          );

        case 'Radio+TextArea' :
          return (
            <div key={idx}>
              <div style={styles.formItem}>
                <div style={styles.formLabel}>{ele.label}</div>
                <IceFormBinder
                  required={ele.isRequired}
                  message="必选"
                  name={ele.name}
                >
                  <RadioGroup
                    onChange={(value) => {
                      let textArea = findDOMNode(document.getElementById(ele.textAreaName));
                      if (value === ele.valueShowTextArea) { // show
                        textArea.style.display = 'flex';
                      } else {  // hide
                        textArea.style.display = 'none';
                      }
                    }}
                    dataSource={ele.dataSource}
                    disabled={!enableChange || ele.enableChange}
                  />
                </IceFormBinder>
                <div style={styles.formError}>
                  <IceFormError name={ele.name} />
                </div>
              </div>
              <div style={{
                ...styles.formItem,
                display: this.props.formData[`${ele.name}`] === ele.valueShowTextArea ? 'flex' : 'none',
              }} id={ele.textAreaName}>
                <div style={styles.formLabel}>{ele.textAreaLabel}</div>
                  <IceFormBinder
                    name={ele.textAreaName}
                  >
                  <Input.TextArea
                    size="medium"
                    style={{ width: '400px' }}
                    disabled={!enableChange || ele.enableChange}
                    placeholder={ele.placeholder}
                  />
                </IceFormBinder>
              </div>
            </div>
          );

        case 'File':
          return (
            <div key={idx} style={styles.formItem}>
              <div style={styles.formLabel}>{ele.label}</div>
              {
                enableChange && (
                  <div>
                    <IceFormBinder
                      name={ele.name}
                      required={ele.isRequired}
                    >
                      <Upload.Dragger
                        beforeUpload={(file, options) => {
                          return {
                            headers: {
                              token: cookies.get('token')
                            }
                          }
                        }}
                        listType="text"
                        action="/api/file/upload"
                        disabled={!enableChange || ele.enableChange}
                        onSuccess={() => {
                          Message.success('文件上传成功');
                        }}
                        onError={() => {
                          Message.error('文件上传失败');
                        }}
                        limit={1}
                        autoUpload={true}
                        formatter={(res, file) => {
                          let { code, msg } = res;
                          // todo: 这里不能设置state！否则整个Upload会不能用！可能是因为刷新了状态机导致他们自己的刷新中断！
                          // this.setState({
                          //   realFileName: msg.filename,
                          // });
                          return {
                            success: code === 0,
                            url: `/files/${msg.filename}`,
                          }
                        }}
                      />
                    </IceFormBinder>
                    <div style={styles.formError}>
                      <IceFormError name={ele.name} />
                    </div>
                  </div>
                )
              }
              {
                !enableChange && (
                  <div className="next-upload-list next-upload-list-text">
                    <div className="next-upload-list-item">
                      <div className="next-upload-list-item-name-wrap">
                        <a href={ (this.state.value.files && this.state.value.files.length) ? this.state.value.files[0].url : "#" } target="_blank" className="next-upload-list-item-name">
                          <span>{(this.state.value.files && this.state.value.files.length) ? this.state.value.files[0].name : "无附件"}</span>
                        </a></div>
                    </div>
                  </div>
                )
              }
            </div>
          );
          break;

        case 'DatePicker':
          return (
            <div key={idx} style={styles.formItem}>
              <div style={styles.formLabel}>{ele.label}</div>
              <IceFormBinder
                required={ele.isRequired}
                message={ele.message}
                name={ele.name}
              >
                <DatePicker
                  size="medium"
                  style={{ width: '400px' }}
                  disabled={!enableChange || ele.enableChange}
                  placeholder={ele.placeholder}
                />
              </IceFormBinder>
              <div style={styles.formError}>
                <IceFormError name={ele.name} />
              </div>
            </div>
          );
          break;

        case 'TimePicker':
          return (
            <div key={idx} style={styles.formItem}>
              <div style={styles.formLabel}>{ele.label}</div>
              <IceFormBinder
                required={ele.isRequired}
                message={ele.message}
                name={ele.name}
              >
                <TimePicker
                  size="medium"
                  style={{ width: '400px' }}
                  disabled={!enableChange || ele.enableChange}
                  placeholder={ele.placeholder}
                  format={'HH:mm'}
                />
              </IceFormBinder>
              <div style={styles.formError}>
                <IceFormError name={ele.name} />
              </div>
            </div>
          );
          break;

        case 'DateAndTimePicker':
          return (
            <div key={idx} style={styles.formItem}>
              <div style={styles.formLabel}>{ele.label}</div>
              <IceFormBinder
                required={ele.isRequired}
                message={ele.message}
                name={ele.name}
              >
                <DatePicker
                  showTime={{ format : 'HH:mm' }}
                  size="medium"
                  style={{ width: '400px' }}
                  disabled={!enableChange || ele.enableChange}
                  placeholder={ele.placeholder}
                />
              </IceFormBinder>
              <div style={styles.formError}>
                <IceFormError name={ele.name} />
              </div>
            </div>
          );
          break;

        default:
          return <div key={idx}>该类型无法识别</div>
      }
    })
  }

  async commitNote({ action = 'commit', requestNote = {}, oid='' }) {
    let res = await request
      .post('/staff/requestNote/commit',{
        requestNote,
        action,
        type: this.props.type,
        oid,
        realFileName: this.state.realFileName,  // 带有前缀的真实的文件名，为了方便删除文件
      });
    let { code, msg } = res.data;
    return code;
  }

  handleCommitNote(action) {
    if (action === 'save') {  // 不进行其他的校验，只检查标题是否已填写（必须要有标题）
      if(!this.state.value.title) {
        Message.error('本申请单标题必填');
        return;
      }
      this.setState({
        saveLoading: true,
      }, () => {
        this
          .commitNote({
            action,
            requestNote: this.state.value,
            oid: this.props.oid,
          })
          .then((code) => {
            if(code !== 0) {
              throw new Error(`提交或保存申请单接口code为${code}`);
            }
            Message.success(`${action === 'commit' ? '提交' : '保存'}成功`);
            this.props.history.push('/staff/requestNoteList');
          });
      });
    } else if(action === 'commit') {
      this.refs.form.validateAll((errors, values) => {
        if(errors) {
          Message.error('请检查必填项');
          return;
        }
        this.setState({
          commitLoading: true,
        }, () => {
          this
            .commitNote({
              action,
              requestNote: this.state.value,
              oid: this.props.oid,
            })
            .then((code) => {
              if(code !== 0) {
                throw new Error(`提交或保存申请单接口code为${code}`);
              }
              Message.success(`${action === 'commit' ? '提交' : '保存'}成功`);
              this.props.history.push('/staff/requestNoteList');
            });
        });
      });
    }
  }

  async closeNote({ oid }) {
    let res = await request
      .post('/staff/requestNote/close', {
        oid,
      });
    let { code, msg } = res.data;
    return code;
  }

  handleCloseNote(e) {
    e.preventDefault();
    this
      .closeNote({ oid: this.props.oid })
      .then(( code ) => {
        if(code !== 0) {
          throw new Error(`关闭申请单接口code为${code}`);
        }
        Message.success('关闭成功');
        this.props.history.push('/staff/requestNoteList');
      });
  }

  async resetNote({ oid }) {
    let res = await request
      .post('/staff/requestNote/reset', {
        oid,
      });
    let { code, msg } = res.data;
    return code;
  }

  handleResetNote() {
    this
      .resetNote({ oid: this.props.oid })
      .then(( code ) => {
        if(code !== 0) {
          throw new Error(`重置申请单接口code为${code}`);
        }
        Message.success('重置成功');
        this.props.history.push('/staff/requestNoteList');
      });
  }

  async approveNote({ oid, action, reason }) {
    let res = await request
      .post('/approver/requestNote/approval', {
        oid,
        action,
        reason,
      });
    let { code, msg } = res.data;
    return code;
  }

  handleApproveNote(action, e) {
    e.preventDefault();
    if( action === 'pass' ) {
      let dialog = Dialog.confirm({
        title: '确认同意',
        content: '您确认同意此申请单吗？',
        onOk: () => {
          return this
            .approveNote({ oid: this.props.oid, action })
            .then((code) => {
              if(code !== 0) {
                throw new Error(`批准申请单接口code为${code}`);
              }
              Message.success("审批成功");
              this.props.history.push('/approver/approvalList');
            });
        },
        onCancel: () => {
          dialog.hide();
        },
        onClose: () => {
          dialog.hide();
        }
      });
    } else if( action === 'refuse') {
      ReasonDialog.show({
        value: {},
        onOk: (value) => {
          return this
            .approveNote({ oid: this.props.oid, action, reason: value.reason })
            .then(( code ) => {
              if(code !== 0) {
                throw new Error(`批准申请单接口code为${code}`);
              }
              Message.success('拒绝成功');
              ReasonDialog.hide();
              this.props.history.push('/approver/approvalList');
            });
        },
        onClose: () => {
          ReasonDialog.hide();
        },
        onCancel: () => {
          ReasonDialog.hide();
        },
      });
    }
  }

  /**
   * 导出
   * @param action
   */
  handleExport(action) {
    html2pdf(document.getElementById('exportTable'), {
      margin: [5, 5, 5, 5],
      filename: `${this.props.title || '无标题'}.pdf`,
      pagebreak: {
        // mode: ['avoid-all'],  // 如果这样写分页，分页的时候有可能出现扭曲和弯曲，玄学
        mode: ['legacy']
      },
    });
  }

  componentDidMount() {
    let formItems = this.renderForm(this.props.formConfig);
    this.setState({
      formItems,
      value: this.props.formData,
    }, () => {  // 根据高度设置分页
      const maxPageHeight = 1080;  // A4纸高度
      let currentPageHeight = 0;
      let isFirstPage = true;  // 是否是第一页
      let tblRows = document.getElementById('exportTable') && document.getElementById('exportTable').childNodes[2];  // tbody
      if (tblRows) {
        tblRows = tblRows.childNodes || [];
        tblRows.forEach((row) => {
          if(row.offsetHeight)
            currentPageHeight = currentPageHeight + row.offsetHeight;
          if (isFirstPage ? currentPageHeight > (maxPageHeight - 60) : currentPageHeight > maxPageHeight)  // 如果是第一页则去掉60px的标题和oid高度
          {
            isFirstPage = false;
            currentPageHeight = 0;
            let pageBreak = document.createElement('div');
            pageBreak.className = 'html2pdf__page-break';
            row.before(pageBreak);
          }
        });
      }
    });
  }

  render() {
    return (
      <IceContainer className="request-note" style={{ minHeight: `${minHeight - 20}px` }}>
        <div style={styles.back} onClick={this.props.history.goBack}>
          <Icon type="arrow-left" />返回列表
        </div>
        {
          this.props.actions.showWellFormedTable ||
          <Row>
            <Col span={17}>
              <div style={styles.title}>{this.props.title}</div>
            </Col>
          </Row>
        }
        <IceFormBinderWrapper
          value={this.state.value}
          onChange={this.formChange}
          ref="form"
        >
          <Row style={{ paddingLeft: '20px' }}>
            <Col span={17}>
              {
                this.props.actions.showWellFormedTable ?
                  <table id="exportTable" className="exportTable" style={tableStyles.exportTable}>
                    <div className="title">{this.props.title}</div>
                    <div className="oid">申请编号：{this.props.oid}</div>
                    <tbody>
                    {
                      this.props.exportTableConfig.map((table_tr, index) => {
                        return (
                          <tr key={index}>
                            {
                              table_tr.map((table_td, idx) => {
                                let inner = '';
                                let date, year, month, day, hour, minute;
                                switch(table_td.type) {
                                  case 'label':
                                    inner = table_td.value || '';
                                    break;
                                  case 'value':
                                    inner = this.state.value[table_td.value] || '';
                                    break;
                                  case 'label+radio':
                                    if(table_td.radios) {  // 如果自定义了radios
                                      inner = `${table_td.label}`
                                        + `  [ ${this.state.value[table_td.value] === '是' ? '☑' : '☐'}${table_td.radios[0]}`
                                        + `  ${this.state.value[table_td.value] === '否' ? '☑' : '☐'} ${table_td.radios[1]} ]`;
                                    } else {
                                      inner = `${table_td.label}`
                                        + `  [ ${this.state.value[table_td.value] === '是' ? '☑' : '☐'}是`
                                        + `  ${this.state.value[table_td.value] === '否' ? '☑' : '☐'}否 ]`;
                                    }
                                    break;
                                  case 'label+value':
                                    inner = `${table_td.label || ''}：${this.state.value[table_td.value] || ''}`;
                                    break;
                                  case 'file':
                                    inner = (
                                      <a href={(this.state.value.files && this.state.value.files.length) ? this.state.value.files[0].url : "#"} target="_blank">
                                        {
                                          (this.state.value.files && this.state.value.files.length) ? this.state.value.files[0].name : "无附件"
                                        }
                                      </a>
                                    );
                                    break;
                                  case 'custom':
                                    inner = table_td.value;
                                    break;
                                  case 'dateAndTimeValue':
                                    date = moment(this.state.value[table_td.value] || undefined);
                                    year = date.year();
                                    month = date.month() + 1;
                                    day = date.date();
                                    hour = date.hour();
                                    hour = hour.toString().length === 1 ? `0${hour}` : hour;
                                    minute = date.minute();
                                    minute = minute.toString().length === 1 ? `0${minute}` : minute;
                                    inner = `${year}年${month}月${day}日  ${hour}:${minute}`;
                                    break;
                                  case 'dateValue':
                                    date = moment(this.state.value[table_td.value] || undefined);
                                    year = date.year();
                                    month = date.month() + 1;
                                    day = date.date();
                                    inner = `${year}年${month}月${day}日`;
                                    break;
                                  case 'timeValue':
                                    date = moment(this.state.value[table_td.value] || undefined);
                                    hour = date.hour();
                                    hour = hour.toString().length === 1 ? `0${hour}` : hour;
                                    minute = date.minute();
                                    minute = minute.toString().length === 1 ? `0${minute}` : minute;
                                    inner = `${hour}:${minute}`;
                                    break;
                                }
                                return (
                                  <td key={idx} className={table_td.className || ''} style={table_td.styles || {}}>
                                    { inner }
                                  </td>
                                )
                              })
                            }
                          </tr>
                        )
                      })
                    }
                    </tbody>
                  </table> :
                  <div style={styles.formContent}>
                    {this.state.formItems}
                  </div>
              }

            </Col>
            <Col span={7} style={this.props.actions.showWellFormedTable ? { marginTop: '60px' } : {} }>
              {/*<Affix offsetTop={15}>*/}
                <div>
                  {/*// todo: 能够监听浏览器滑动自动fixed滑动 */}
                  {
                    this.props.actions.showReason &&
                    <div className='hint-container' style={{
                      ...styles.hintContainer,
                      border: '1px solid red',
                    }}>
                      <div className="hint-title" style={styles.hintTitle}>
                        审批未通过原因
                      </div>
                      <div className="hint-content" style={styles.hintContent}>
                        <p>{this.props.reason}</p>
                      </div>
                    </div>
                  }
                  {
                    this.props.actions.showHint &&
                    <div className='hint-container' style={{
                      ...styles.hintContainer,
                    }}>
                      <div className="hint-title" style={styles.hintTitle}>
                        提示
                      </div>
                      <div className="hint-content" style={
                        {
                          ...styles.hintContent,
                          whiteSpace: 'pre-line',
                        }
                      }>
                        <p>{this.props.hint}</p>
                      </div>
                    </div>
                  }
                  {
                    this.props.actions.showStatus &&
                    <div className="hint-container" style={{
                      ...styles.hintContainer,
                      border: '1px solid #3080FE',
                    }}>
                      <div className="hint-title" style={styles.hintTitle}>
                        申请单状态
                      </div>
                      <Timeline>
                        {/* todo: Timeline下面的子元素是不能返回null的*/ }
                        <Timeline.Item
                          title={<div>提交</div>}
                          state={ this.props.step === 0 ? 'process' : 'success' }
                        />
                        {
                          this.props.approvers.map((approverType, idx) => {
                            let state;
                            if( this.props.isRejected && ( idx + 1) === this.props.step ) {  // 如果是已拒绝
                              state = "error";
                            } else if( (idx + 1) === this.props.step ) {  // 如果是正在处理
                              state = "process";
                            } else if ( (idx + 1) < this.props.step ) {  // 如果是已经处理
                              state = "success";
                            } else {  // 如果是还没有处理
                              state = "done";
                            }
                            return (
                              <Timeline.Item
                                key={idx}
                                title={<div>审批-{approverType}</div>}
                                state={state}
                              />
                            );
                          })
                        }
                        <Timeline.Item
                          title={<div>进行中</div>}
                          state={ this.props.step < 1000 ? 'done' : this.props.step === 1000 ? 'process' : 'success' }
                        />
                        {
                          this.props.moreSteps.map((stepName, idx) => {
                            let state;
                            if(  this.props.isRejected && ( idx + 1001 ) === this.props.step) {  // 如果是已拒绝
                              state = "error";
                            } else if( (idx + 1001) === this.props.step ) {  // 如果是正在处理
                              state = "process";
                            } else if ( (idx + 1001) < this.props.step ) {  // 如果是已经处理
                              state = "success";
                            } else {  // 如果是还没有处理
                              state = "done";
                            }
                            return (
                              <Timeline.Item
                                key={idx}
                                title={<div>{stepName}</div>}
                                state={state}
                              />
                            );
                          })
                        }
                        <Timeline.Item
                          title={<div>关闭</div>}
                          state={ this.props.step < 2000 ? 'done' : this.props.step === 1000 ? 'process' : 'success' }
                        />
                      </Timeline>
                    </div>
                  }
                  {
                    this.props.actions.showCommitButton &&
                    <div className='hint-container' style={styles.hintContainer}>
                      <div className="hint-title" style={styles.hintTitle}>
                        操作
                      </div>
                      <div className="hint-content" style={styles.hintContent}>
                        <div style={{textAlign: 'center', marginBottom: '15px'}}>
                          <Button
                            type="primary"
                            size="large"
                            style={styles.leftButton}
                            loading={this.state.commitLoading}
                            onClick={this.handleCommitNote.bind(this, 'commit')}
                          >
                            提 交
                          </Button>
                          <Button
                            type="secondary"
                            size="large"
                            style={styles.rightButton}
                            loading={this.state.saveLoading}
                            onClick={this.handleCommitNote.bind(this, 'save')}
                          >
                            保 存
                          </Button>
                        </div>
                      </div>
                    </div>
                  }
                  {
                    this.props.actions.showCloseButton &&
                    <div className='hint-container' style={styles.hintContainer}>
                      <div className="hint-title" style={styles.hintTitle}>
                        操作
                      </div>
                      <div className="hint-content" style={styles.hintContent}>
                        <div style={{textAlign: 'center', marginBottom: '15px'}}>
                          <Button
                            type="secondary"
                            size="large"
                            shape="warning"
                            onClick={this.handleCloseNote.bind(this)}
                          >
                            关 闭 此 申 请 单
                          </Button>
                        </div>
                      </div>
                    </div>
                  }
                  {
                    this.props.actions.showResetButton &&
                    <div className='hint-container' style={styles.hintContainer}>
                      <div className="hint-title" style={styles.hintTitle}>
                        操作
                      </div>
                      <div className="hint-content" style={styles.hintContent}>
                        <div style={{textAlign: 'center', marginBottom: '15px'}}>
                          <Button
                            type="secondary"
                            size="large"
                            shape="warning"
                            onClick={this.handleResetNote.bind(this)}
                          >
                            重 新 编 辑 此 申 请 单
                          </Button>
                        </div>
                      </div>
                    </div>
                  }
                  {
                    this.props.actions.showApprovalButton &&
                    <div className='hint-container' style={styles.hintContainer}>
                      <div className="hint-title" style={styles.hintTitle}>
                        操作
                      </div>
                      <div className="hint-content" style={styles.hintContent}>
                        <div style={{textAlign: 'center', marginBottom: '15px'}}>
                          <Button
                            type="secondary"
                            size="large"
                            style={styles.leftButton}
                            onClick={this.handleApproveNote.bind(this, 'pass')}
                          >
                            同 意
                          </Button>
                          <Button
                            type="secondary"
                            size="large"
                            shape="warning"
                            style={styles.rightButton}
                            onClick={this.handleApproveNote.bind(this, 'refuse')}
                          >
                            拒 绝
                          </Button>
                        </div>
                      </div>
                    </div>
                  }
                  {
                    this.props.actions.showExport &&
                    <div className='hint-container' style={styles.hintContainer}>
                      <div className="hint-title" style={styles.hintTitle}>
                        操作
                      </div>
                      <div className="hint-content" style={styles.hintContent}>
                        <div style={{textAlign: 'center', marginBottom: '15px'}}>
                          <Button
                            type="normal"
                            size="large"
                            style={{
                              ...styles.rightButton,
                            }}
                            onClick={this.handleExport.bind(this, 'pdf')}
                          >
                            导 出 为 PDF
                          </Button>
                        </div>
                      </div>
                    </div>
                  }
                  {
                    this.props.actions.showStep1001Button &&
                    <div className='hint-container' style={styles.hintContainer}>
                      <div className="hint-title" style={styles.hintTitle}>
                        操作
                      </div>
                      <div className="hint-content" style={styles.hintContent}>
                        <div style={{textAlign: 'center', marginBottom: '15px'}}>
                          <Button
                            type="secondary"
                            size="large"
                            style={{
                              ...styles.leftButton,
                            }}
                            onClick={(e) => {
                              e.preventDefault();
                              let dialog = Dialog.show({
                                title: '填写变更实施现场情况描述',
                                content: (
                                  <div>
                                    <div style={styles.formItem}>
                                      <div style={{ ...styles.formLabel, width: '90px'}}>实施状况</div>
                                      <Input.TextArea
                                        placeholder={'实施状况'}
                                        onChange={function(value){
                                          this.setState({
                                            onSiteDescription: value,
                                          });
                                        }.bind(this)}
                                        style={{ width: '300px' }}
                                      />
                                    </div>
                                    <div style={styles.formItem}>
                                      <div style={{ ...styles.formLabel, width: '90px'}}>测试情况</div>
                                      <Input.TextArea
                                        placeholder={'测试情况'}
                                        onChange={function(value){
                                          this.setState({
                                            onSiteTestDescription: value,
                                          });
                                        }.bind(this)}
                                        style={{ width: '300px' }}
                                      />
                                    </div>
                                    <div style={styles.formItem}>
                                      <div style={{ ...styles.formLabel, width: '90px'}}>测试结果</div>
                                      <Input.TextArea
                                        placeholder={'测试结果'}
                                        onChange={function(value){
                                          this.setState({
                                            onSiteTestResult: value,
                                          });
                                        }.bind(this)}
                                        style={{ width: '300px' }}
                                      />
                                    </div>
                                    <div style={styles.formItem}>
                                      <div style={{ ...styles.formLabel, width: '90px'}}>变更监控情况</div>
                                      <Input.TextArea
                                        placeholder={'变更监控情况'}
                                        onChange={function(value){
                                          this.setState({
                                            onSiteSupervisor: value,
                                          });
                                        }.bind(this)}
                                        style={{ width: '300px' }}
                                      />
                                    </div>
                                  </div>
                                ),
                                onOk: () => {
                                  return request.post('/requestChange/review/addOnSiteDescription', {
                                    oid: this.props.oid,
                                    onSiteDescription: this.state.onSiteDescription,
                                    onSiteTestResult: this.state.onSiteTestResult,
                                    onSiteTestDescription: this.state.onSiteTestDescription,
                                    onSiteSupervisor: this.state.onSiteSupervisor,
                                  }).then((res) => {
                                    let { code, msg } = res.data;
                                    if( code !== 0 ){
                                      throw new Error(`填写变更实施现场情况描述接口code为${code}`);
                                    }
                                    Message.success('添加变更现场情况描述成功');
                                    this.props.history.push('/staff/requestNoteList');
                                  });
                                },
                                onCancel: () => {
                                  dialog.hide();
                                }
                              })
                            }}
                          >
                            填写变更实施现场情况描述
                          </Button>
                        </div>
                      </div>
                    </div>
                  }
                  {
                    this.props.actions.showStep1002Button &&
                    <div className='hint-container' style={styles.hintContainer}>
                      <div className="hint-title" style={styles.hintTitle}>
                        操作
                      </div>
                      <div className="hint-content" style={styles.hintContent}>
                        <div style={{textAlign: 'center', marginBottom: '15px'}}>
                          <Button
                            type="secondary"
                            size="large"
                            style={{
                              ...styles.leftButton,
                            }}
                            onClick={(e) => {
                              e.preventDefault();
                              let dialog = Dialog.confirm({
                                title: '您确认签字同意吗？',
                                onOk: () => {
                                  return request.post('/approver/requestNote/approval', {
                                    oid: this.props.oid,
                                    action: 'pass',
                                    reason: '',
                                  }).then((res) => {
                                    let { code, msg } = res.data;
                                    if( code !== 0 ){
                                      throw new Error(`code为${code}`);
                                    }
                                    Message.success('签名成功');
                                    this.props.history.push('/approver/approvalList');
                                  });
                                },
                                onCancel: () => {
                                  dialog.hide();
                                }
                              })
                            }}
                          >
                            签 名
                          </Button>
                        </div>
                      </div>
                    </div>
                  }
                  {
                    this.props.actions.showStep1005Button &&
                    <div className='hint-container' style={styles.hintContainer}>
                      <div className="hint-title" style={styles.hintTitle}>
                        操作
                      </div>
                      <div className="hint-content" style={styles.hintContent}>
                        <div style={{textAlign: 'center', marginBottom: '15px'}}>
                          <Button
                            type="secondary"
                            size="large"
                            style={{
                              ...styles.leftButton,
                            }}
                            onClick={(e) => {
                              e.preventDefault();
                              let dialog = Dialog.confirm({
                                title: '您确认签字同意吗？',
                                onOk: () => {
                                  return request.post('/approver/requestNote/approval', {
                                    oid: this.props.oid,
                                    action: 'pass',
                                    reason: '',
                                  }).then((res) => {
                                    let { code, msg } = res.data;
                                    if( code !== 0 ){
                                      throw new Error(`code为${code}`);
                                    }
                                    Message.success('签名成功');
                                    this.props.history.push('/approver/approvalList');
                                  });
                                },
                                onCancel: () => {
                                  dialog.hide();
                                }
                              })
                            }}
                          >
                            签 名
                          </Button>
                        </div>
                      </div>
                    </div>
                  }
                  {
                    this.props.actions.showComStep1006Button &&
                    <div className='hint-container' style={styles.hintContainer}>
                      <div className="hint-title" style={styles.hintTitle}>
                        操作
                      </div>
                      <div className="hint-content" style={styles.hintContent}>
                        <div style={{textAlign: 'center', marginBottom: '15px'}}>
                          <Button
                            type="secondary"
                            size="large"
                            style={{
                              ...styles.leftButton,
                            }}
                            onClick={(e) => {
                              e.preventDefault();
                              let dialog = Dialog.show({
                                title: '填写变更回顾内容',
                                content: (
                                  <div>
                                    <div style={styles.formItem}>
                                      <div style={{
                                        width: '100px',
                                        marginRight: '10px',
                                        textAlign: 'left',
                                        flexShrink: '0',
                                      }}>变更回顾代码</div>
                                      <div>
                                        <RadioGroup
                                          onChange={function(value){
                                            this.setState({
                                              reviewCode: value,
                                            });
                                          }.bind(this)}
                                          dataSource={[{
                                            value: '实施正常',
                                            label: '实施正常',
                                          }, {
                                            value: '计划不全',
                                            label: '计划不全',
                                          }, {
                                            value: '实施操作有误',
                                            label: '实施操作有误',
                                          }, {
                                            value: '有遗留问题',
                                            label: '有遗留问题',
                                          }, {
                                            value: '不可预料情况',
                                            label: '不可预料情况'
                                          }]}
                                        />
                                      </div>
                                    </div>
                                    <div style={styles.formItem}>
                                      <div style={{
                                        width: '100px',
                                        marginRight: '10px',
                                        textAlign: 'left',
                                        flexShrink: '0',
                                      }}>变更关闭代码</div>
                                      <div>
                                        <RadioGroup
                                          onChange={function(value){
                                            this.setState({
                                              reviewCloseCode: value,
                                            });
                                          }.bind(this)}
                                          dataSource={[{
                                            value: '成功',
                                            label: '成功',
                                          }, {
                                            value: '失败',
                                            label: '失败',
                                          }, {
                                            value: '取消',
                                            label: '取消',
                                          }]}
                                        />
                                      </div>
                                    </div>
                                    <div style={styles.formItem}>
                                      <div style={{
                                        width: '100px',
                                        marginRight: '10px',
                                        textAlign: 'left',
                                        flexShrink: '0',
                                      }}>变更回顾说明</div>
                                      <div>
                                        <Input.TextArea
                                          onChange={function(value){
                                            this.setState({
                                              reviewExplain: value,
                                            });
                                          }.bind(this)}
                                          style={{ width: '300px' }}
                                        />
                                      </div>
                                    </div>
                                  </div>
                                ),
                                onOk: () => {
                                  return request.post('/requestChange/review/addReview', {
                                    oid: this.props.oid,
                                    reviewCode: this.state.reviewCode,
                                    reviewExplain: this.state.reviewExplain,
                                    reviewCloseCode: this.state.reviewCloseCode
                                  }).then((res) => {
                                    let { code, msg } = res.data;
                                    if( code !== 0 ){
                                      throw new Error(`填写变更回顾代码等内容接口code为${code}`);
                                    }
                                    Message.success('填写变更回顾代码等内容成功');
                                    this.props.history.push('/staff/requestNoteList');
                                  });
                                },
                                onCancel: () => {
                                  dialog.hide();
                                }
                              })
                            }}
                          >
                            填写变更回顾代码等内容
                          </Button>
                        </div>
                      </div>
                    </div>
                  }
                  </div>
              {/*</Affix>*/}
            </Col>
          </Row>
        </IceFormBinderWrapper>
      </IceContainer>
    );
  }
}

const styles = {
  back: {
    margin: '10px 0 20px 0',
    fontSize: '18px',
    fontWeight: '500',
    color: '#5584FF',
    cursor: 'pointer',
  },
  title: {
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: '18px',
    marginBottom: '30px',
  },
  formContent: {
    width: '752px',
    margin: '0 auto',
    paddingLeft: '80px',
  },
  formItem: {
    marginBottom: '20px',
    display: 'flex',
    alignItems: 'center',
  },
  formLabel: {
    width: '160px',
    marginRight: '10px',
    textAlign: 'left',
    flexShrink: '0',
  },
  formError: {
    marginLeft: '10px',
    width: '30px',
  },
  leftButton: {

  },
  rightButton: {
    marginLeft: '20px',
  },
  hintContainer: {
    border: '2px solid #efefef',
    borderRadius: '4px',
    padding: '10px',
    marginLeft: '10px',
    marginBottom: '20px',
  },
  hintTitle: {
    fontSize: '14px',
    fontWeight: 'bold',
    marginBottom: '15px',
  },
  hintContent: {

  }
};
